<template>
	<view class="">
		<view class="p-30">
			<view class="">
				<image :src="poster" style="width: 100%;height: 800rpx;"></image>
			</view>
			<view class="flex-row justify-between align-center mt-30">
				<view>
					<u-button @click="save" type="primary" :customStyle="{'width':'300rpx'}" shape="circle" text="保存海报"></u-button>
				</view>
				<view class="">
					<u-button  open-type="share" type="success" :customStyle="{'width':'300rpx'}" shape="circle" text="一键分享"></u-button>
				</view>
			</view>
		</view>
		<view class="submit">
			<u-scroll-list @right="right" @left="left" :indicator="false">
				<view class="scroll-list" style="flex-direction: row;">
					<view @click="select(index)" class="scroll-list__goods-item" v-for="(item, index) in list" :key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
						<image class="scroll-list__goods-item__image" :src="item.bg_image"></image>
					</view>
				</view>
			</u-scroll-list>

		</view>
	</view>
</template>

<script>
	import {
		poster,
		getposter
	} from '@/common/api.js'
	export default {
		data() {
			return {
				list: [

				],
				poster:"",
				poster_id: 0
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			//分享朋友圈
			onShareTimeline(res) {
				return {
					title: '',//分享的标题
					imageUrl: this.poster,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
					query: 'from=shareTimeline',//页面打开的传参
				}
			},
			// 分享到好友
			onShareAppMessage(res) {
				return {
					title: '',//分享的标题
					imageUrl: this.poster,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
					path: '/pages/index/index',//点击链接后跳转的页面，可以带参数
				}
			},
			initData() {
				poster().then(res => {

					this.list = res
					console.log('this.list3', this.list);
					this.poster_id = res[0].id
					this.getPosters()
				})
			},
			getPosters() {
				getposter({
					data: {
						poster_id: this.poster_id
					},
					custom: {
						catch: true
					}
				}).then(res => {
					console.log('res', res);
					this.poster = res
				})
			},
			select(index) {
				this.poster = "";
				this.poster_id = this.list[index].id
				this.getPosters()
			},
			save() {
				uni.showLoading({
					title: '下载中....'
				})
				// 下载图片
				uni.downloadFile({
				    url: this.poster,
				    success: downloadResult => {
				        if (downloadResult.statusCode === 200) {
				            // 获取下载后的图片临时文件路径
				            let tempFilePath = downloadResult.tempFilePath;
				            
				            // 保存图片到系统相册
				            uni.saveImageToPhotosAlbum({
				                filePath: tempFilePath,
				                success: () => {
									uni.hideLoading();
				                    uni.showToast({
				                        title: '图片保存成功'
				                    });
				                },
				                fail: error => {
									uni.hideLoading();
				                    console.log('保存图片失败：', error);
				                    uni.showModal({
				                        content: '保存图片失败，请检查权限',
				                        showCancel: false
				                    });
				                }
				            });
				        } else {
							uni.hideLoading();
				            // 处理下载失败
				            console.log('下载图片失败：', downloadResult);
				        }
				    },
				    fail: error => {
						uni.hideLoading();
				        console.log('下载图片失败：', error);
				    }
				});
			}
			
			
		}
	}
</script>


<style lang="scss">
	.submit {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>